import { useEffect, useState } from "react"
import { Table, Avatar, Popover, Space, Popconfirm, Button, Input, message } from "antd"
import type { TableProps } from 'antd';
import { DeleteFilled } from "@ant-design/icons"
import { HappyProvider } from '@ant-design/happy-work-theme';
import { getdiscusslist, DeleteOne } from "@/apis/discuss"
import dayjs from 'dayjs';
const base_url = import.meta.env.VITE_APP_URL
type DataType = {
    _id: string;
    content: string;
    publish_time: number;
    user: {}
}

const Discuss = () => {
    const [total, settotal] = useState(0)
    const [Currentpage, setCurrentpage] = useState(1)
    const [datalist, setDatalist] = useState<DataType[]>([])
    const [Order, setOrder] = useState("desc")
    const [word, setword] = useState('')
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '用户名',
            dataIndex: 'user',
            render: (_) => {
                return <Popover content={<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <Avatar src={base_url + _.avatar}></Avatar>
                    <span>{_.sex == 'male' ? '男' : '女'}</span>
                    <span>{_.constellation}</span>
                    <span>{_.brithday}</span>
                </div>} title="其他信息">
                    <a>{_.username}
                    </a>
                </Popover>


            },
        },


        {
            title: '评论时间',
            dataIndex: 'publish_time',
            defaultSortOrder: 'descend',
            render: (_) => {
                return dayjs(_).format('YYYY-MM-DD HH:mm')
            },
            sorter: (a, b) => a.publish_time - b.publish_time,
        },
        {
            title: '评论内容',
            dataIndex: 'content',

        },
        {
            title: '操作',
            render: (_) => {
                return (
                    <Space size="middle">
                        <HappyProvider>

                        </HappyProvider>

                        <HappyProvider>
                            <Popconfirm
                                title={"删除评论："}
                                description="确定删除吗?"

                                onConfirm={() => confirm(_._id)}

                                okText="确认"
                                cancelText="取消"
                            >
                                <Button type="dashed" icon={<DeleteFilled style={{ color: 'red' }} />}></Button>

                            </Popconfirm>
                        </HappyProvider>
                    </Space>
                )
            }
        },
    ];
    const getList = async (current: number, keyword = "") => {
        const res: any = await getdiscusslist(current * 7 - 7, Order, keyword)
        setDatalist(res.data)
        settotal(res.count.length !== 0 ? res.count[0].total : 0)
        console.log(res)
    }
    const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter: any, extra) => {
        pagination
        filters
        extra
        if (!sorter.order) {
            setOrder('desc')
        } else {
            if (sorter.order === 'descend') {
                setOrder("desc")
            } else {
                setOrder('asc')
            }
        }

    }
    const confirm = async (e: string) => {
        console.log(e)
        const res = await DeleteOne(e)
        if (res.status === 200) {
            message.success("删除成功")
            if (Currentpage !== 1 && datalist.length == 1) {
                setCurrentpage(Currentpage - 1)
                console.log("ok22")
            } else {
                console.log("ok")
                getList(Currentpage, word)
            }
        }
    }
    const search = () => {
        getList(Currentpage, word)
    }
    const searcall = () => {
        setword('')
        getList(Currentpage, '')
    }
    useEffect(() => {
        getList(Currentpage, word)
    }, [Currentpage, Order])
    return (
        <div>
            <div style={{ display: "flex", width: "300px" }}><Input value={word} onChange={(e) => setword(e.target.value)}></Input> <Button onClick={search} style={{ margin: "0 10px" }} type="primary">搜索</Button>  <Button type="primary" onClick={searcall}>全部</Button></div>
            <Table onChange={onChange} rowKey={'_id'} columns={columns} dataSource={datalist} pagination={{
                showTotal: () => {
                    return `共${total}条`
                },
                current: Currentpage,
                defaultCurrent: 1,
                total: total,
                defaultPageSize: 7,
                showSizeChanger: false,
                onChange: (page) => {
                    setCurrentpage(page)
                }

            }} />
        </div>
    )
}

export default Discuss